<template>
	<div class="simulation">
		<div class="simulation-warp">
			<cmp-crumb color="#f7f7f7" :list="crumb"></cmp-crumb>
			<div class="imitate-nav">
				<div class="imitate-nav-item">
					<div class="nav-title">
						<span>考点练习</span>
						<div class="nav-btn" @click="points">进入</div>
					</div>
					<div class="nav-intro">根据题库提供的考点进行逐一练习</div>
				</div>
				<div class="imitate-nav-item">
					<div class="nav-title">
						<span>自由组卷</span>
						<div class="nav-btn" @click="free">进入</div>
					</div>
					<div class="nav-intro">从总体题库中，根据设置的单选多选数量随机</div>
				</div>
				<!-- 		<div class="imitate-nav-item">
					<div class="nav-title">
						<span>仿真测验</span>
						<div class="nav-btn">进入</div>
					</div>
					<div class="nav-intro">根据大赛的试卷要求进行抽取试题组卷</div>
				</div> -->
			</div>
			<div class="cont-title">
				测试记录
			</div>
			<div class="test-list" v-if="list && list.length != 0">
				<div class="test-item" v-for="item in list">
					<div class="test-intro">
						<div class="test-name">{{item.title}}</div>
						<div class="test-time">
							<span class="time-text">最后一次测试时间：2099-09-09</span>
							<div class="time-tag">
								<div class="tag-icon">
									<img src="../assets/img/question_icon1.png" alt="">
								</div>
								<span>共{{item.allCount}}道</span>
							</div>
							<div class="time-tag">
								<div class="tag-icon">
									<img src="../assets/img/question_icon2.png" alt="">
								</div>
								<span>共{{item.errorCount}}道</span>
							</div>
						</div>
					</div>
					<div class="test-btn" @click="goTest(item)">再来一次</div>
				</div>
			</div>
			<div class="test-list" v-else>
				<el-empty description="暂无测试记录"></el-empty>
			</div>
			<div class="page-cont">
				<el-pagination :page-size="pageSize" :hide-on-single-page="true" background layout="prev, pager, next"
					:total="total" @current-change="pageNumChange">
				</el-pagination>
			</div>
			<el-dialog title="考点方向" width="700px" :visible.sync="selectDirShow">
				<div class="tags">
					<el-tag v-for="item in dir" :key="item.dictValue" :effect="selectDir==item.dictValue? 'dark': 'plain'"
						@click="tagSelect(item)">
						{{ item.dictLabel }}
					</el-tag>
				</div>
				<div class="imitate-subheader">
					<div class="subheader">
						<i class=""></i>
						<span>请选择试卷及试题量</span>
					</div>
				</div>
				<div class="question-select" v-if="imitateType == 1">

					<div class="imitate-list2">
						<div class="item">
							<div class="item-cont">
								<i class="select-icon"></i>
								<span>单选题</span>
								<div class="num">
									<input @focus="inputSelect($event)" type="text" v-model="radioNum" />
									/共{{info.radioQuestion}}题
								</div>
							</div>
							<div class="item-option">
								<div class="option-item" @click="startPointsExam(1)">开始练习</div>
							</div>
						</div>
						<div class="item">
							<div class="item-cont">
								<i class="select-icon"></i>
								<span>多选题</span>
								<div class="num">
									<input @focus="inputSelect($event)" type="text" v-model="multiNum" />
									/共{{info.multiQuestion}}题
								</div>
							</div>
							<div class="item-option">
								<div class="option-item" @click="startPointsExam(2)">开始练习</div>
							</div>
						</div>
						<div class="item">
							<div class="item-cont">
								<i class="select-icon"></i>
								<span>判断题</span>
								<div class="num">
									<input @focus="inputSelect($event)" type="text" v-model="judgeNum" />
									/共{{info.judgeQuestion}}题
								</div>
							</div>
							<div class="item-option">
								<div class="option-item" @click="startPointsExam(3)">开始练习</div>
							</div>
						</div>
					</div>
				</div>
				<div class="question-select" v-if="imitateType == 2">

					<div class="item" v-for="(item, index) in freeList">
						<div class="item-cont">
							<i class="select-icon"></i>
							<span>{{item.title}}</span>
							<div class="num">
								单选题
								<input type="text" v-model="item.select1" @input="inputChange(item, '1', index)" />
								/共{{item.quCount1}}题
							</div>
							<div class="num">
								多选题
								<input type="text" v-model="item.select2" @input="inputChange(item, '2', index)" />
								/共{{item.quCount2}}题
							</div>
							<div class="num">
								判断题
								<input type="text" v-model="item.select3" @input="inputChange(item, '3', index)" />
								/共{{item.quCount3}}题
							</div>
						</div>
					</div>
					<div class="free-btns">
						<div class="option-item" @click="startFree">开始练习</div>
					</div>

				</div>
				<!-- 		<span slot="footer" class="dialog-footer">
					<el-button size="mini" @click="selectDirShow = false">取 消</el-button>
					<el-button size="mini" type="primary" @click="selectDirFn">确 定</el-button>
				</span> -->
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import cmpCrumb from '@/components/cmp-crumb'
	import {
		getSimulationListApi,
		getPointsExamApi,
		creatPointsExamApi,
		getFreeExamApi,
		getFreePaperApi,
		getSimulationDirApi
	} from '@/api/Match'
	export default {
		data() {
			return {
				crumb: [{
					title: '主页',
					url: '/'
				}, {
					title: '模拟训练',
					url: '/Simulation'
				}],
				token: this.$store.state.app.token || this.$cookies.get('sy_token'),
				pageNum: 1,
				pageSize: 10,
				list: [],
				total: 0,
				dir: [],
				selectDir: '',
				selectDirShow: false,
				imitateType: 1,
				info: {},
				radioNum: 0,
				multiNum: 0,
				judgeNum: 0,
				freeList: []
			}
		},
		created() {
			this.getList()
			this.getDir()
		},
		methods: {
			getList() {
				getSimulationListApi({
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}).then(res => {
					this.list = res.rows
					this.total = res.total
				})
			},
			getDir() {
				getSimulationDirApi().then(res => {
					this.dir = res.data
					this.selectDir = res.data[0].dictValue
				})
			},
			points() {
				if (!this.token) {
					this.$confirm('您还未登陆，没有权限，请登陆后重试！', '提示', {
						confirmButtonText: '去登陆',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						router.push('/Login')
					}).catch(() => {});
					return false
				}
				this.imitateType = 1
				this.getExam()

			},
			getExam() {
				getPointsExamApi({
					categoryid: this.selectDir
				}).then(res => {
					this.info = res
					this.selectDirShow = true
				})
			},
			tagSelect(item) {
				this.selectDir = item.dictValue
				if (this.imitateType == 1) {
					this.radioNum = 0
					this.multiNum = 0
					this.judgeNum = 0
					this.getExam()
				} else if (this.imitateType == 2) {
					this.getFreeExamList()
				}
			},
			startPointsExam(item) {
				let num = 0
				if (item == 1) {
					num = this.radioNum
				} else if (item == 2) {
					num = this.multiNum
				} else if (item == 3) {
					num = this.judgeNum
				}
				if (num == 0) {
					this.$message.error('请输入要练习的题型数量')
					return false
				}
				creatPointsExamApi({
					categoryid: this.selectDir,
					questionCout: num,
					questionType: item,
				}).then(res => {
					if (res.code == 200) {
						this.$router.push({
							path: '/Exam',
							query: {
								id: res.paperId
							}
						})
					}
				})
			},
			free() {
				if (!this.token) {
					this.$confirm('您还未登陆，没有权限，请登陆后重试！', '提示', {
						confirmButtonText: '去登陆',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						router.push('/Login')
					}).catch(() => {});
					return false
				}
				this.imitateType = 2
				this.selectDir = this.dir[0].dictValue
				this.getFreeExamList()
				// this.selectDirShow = true

			},
			getFreeExamList() {
				getFreeExamApi({
					categoryid: this.selectDir
				}).then(res => {
					this.freeList = res.data
					this.selectDirShow = true
				})
			},
			startFree(item) {
				let list = this.freeList,
					arr = []
				if (!list || list.length == 0) {
					this.$message({
						message: '未选择试题，不能进入练习',
						type: 'error'
					})
					return false
				}
				list.forEach(item => {
					let obj = {
						addCount1: item.select1,
						addCount2: item.select2 || 0,
						addCount3: item.select3 || 0,
						recId: item.recId
					}
					arr.push(obj)
				})
				getFreePaperApi({
					categoryid: this.selectDir,
					repoList: arr
				}).then(res => {
					if (res.code == 200) {
						this.$router.push({
							path: '/Exam',
							query: {
								id: res.paperId
							}
						})
					}
				})
			},



			inputSelect(e) {
				e.currentTarget.select()
			},

			inputChange(index, type) {
				if (this.info['select' + index] >= this.info[type]) {
					this.list[index]['select' + type] = item['quCount' + type]
				}
			},




			selectDirFn() {
				if (!this.selectDir) {
					this.$message.error('请选择考点方向')
					return false
				}
				this.$emit('dirChange', this.selectDir)
				this.$emit('imitateType', this.imitateType)
				this.selectDirShow = false
			},

			pageNumChange(index) {
				this.pageNum = index
				this.getList()
			},
			goTest(item) {
				return
				this.$router.push({
					path: '/Exam',
					query: {
						id: item.recId
					}
				})
			},

		},
		components: {
			cmpCrumb
		}
	}
</script>

<style lang="less">
	@contWidth: 1000px;

	.simulation {
		background-color: #F7F7F7;
		min-height: calc(100vh - 120px);

		/deep/.breadcrumb {
			width: @contWidth;
		}

		.simulation-warp {
			width: @contWidth;
			margin: 0 auto;
		}

		.imitate-nav {
			display: flex;
			padding-top: 17px;
		}

		.imitate-nav-item {
			flex: 1;
			border-radius: 6px;
			overflow: hidden;
			height: 116px;
			padding: 10px 20px;

			&:not(:last-child) {
				margin-right: 20px
			}

			&:nth-of-type(1) {
				background: #D8D8D8 linear-gradient(180deg, #7535FF 0%, #BA7DFF 100%);

			}

			&:nth-of-type(2) {
				background: linear-gradient(180deg, #4162FF 0%, #35CCFF 100%);
			}

			&:nth-of-type(3) {
				background: #D8D8D8 linear-gradient(180deg, #09B693 0%, #47FFC9 100%);
			}
		}

		.nav-title {
			margin-bottom: 11px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 18px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		.nav-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 58px;
			height: 33px;
			background: #FE7C3E;
			border-radius: 4px;
			font-size: 15px;
			cursor: pointer;
		}

		.nav-intro {
			font-size: 14px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #FFFFFF;
		}

		.test-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30px 0;
			border-bottom: 1px solid rgba(151, 151, 151, 0.2);
		}

		.test-name {
			font-size: 18px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-bottom: 22px;
		}

		.test-time {
			display: flex;
			align-items: center;
			font-size: 12px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #666666;
			line-height: 17px;
		}

		.time-text {
			margin-right: 68px;
		}

		.time-tag {
			display: flex;
			align-items: center;
			margin-left: 18px;
		}

		.tag-icon {
			width: 16px;
			height: 16px;
			margin-right: 4px;
		}

		.test-btn {
			width: 89px;
			height: 34px;
			background: #2360FE;
			border-radius: 17px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 14px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 500;
			color: #FFFFFF;
			cursor: pointer;
		}

		.cont-title {
			padding: 30px 0 15px;
			border-bottom: 1px solid rgba(151, 151, 151, 0.2);
			font-size: 16px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #000000;
			line-height: 22px;
		}

		.page-cont {
			padding: 77px 0 74px;
			display: flex;
			justify-content: center;
		}

		.el-pagination.is-background .el-pager li:not(.disabled).active {
			background-color: #2360FE;
		}

		.el-tag {
			margin: 0 10px;
			cursor: pointer;
		}

		.imitate-subheader {
			display: flex;
			height: 72px;
			align-items: center;
			justify-content: space-between;
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;

			.subheader {
				display: flex;
				align-items: center;
			}

			i {
				display: block;
				width: 16px;
				height: 16px;
				background: url(../assets/img/question_icon1.png)no-repeat;
				background-size: 100% 100%;
				margin-right: 8px;
			}
		}

		.imitate-list2 {
			.item {
				height: 80px;
				margin-bottom: 16px;
				background: #F4F8FF;
				border-radius: 11px;
				padding: 0 16px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

		.item-cont {
			display: flex;
			align-items: center;
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.select-icon {
			display: block;
			width: 16px;
			height: 16px;
			border-radius: 16px;
			border: 1px solid #FCDE14;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 11px;

			&:before {
				display: block;
				content: "";
				width: 10px;
				height: 10px;
				border-radius: 10px;
				background-color: #FCDE14;
			}
		}

		.num {
			font-size: 12px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
			// width: 55px;
			padding: 6px 10px;
			// height: 21px;
			background: #FCDE14;
			border-radius: 10px;
			margin-left: 16px;
			display: flex;
			align-items: center;

			input {
				width: 40px;
				height: 20px;
				background-color: rgba(0, 0, 0, 0);
				border: 1px solid #fff;
				border-radius: 2px;
				margin: 0 3px;
				outline: none;

			}
		}

		.item-option {
			display: flex;
			align-items: center;
		}

		.option-item {
			text-align: center;
			line-height: 33px;
			margin-left: 16px;
			width: 85px;
			height: 33px;
			background: rgba(10, 140, 255, 0);
			border-radius: 4px;
			border: 1px solid #0091FF;
			font-size: 15px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 500;
			color: #0091FF;
			cursor: pointer;
		}

		.el-dialog__body {
			padding: 10px 20px;
		}

		.question-select {
			max-height: 400px;
			overflow-y: auto;
		}

		.free-item-title {
			display: flex;
			align-items: center;
			margin-bottom: 10px;
		}

		.free-btns {
			padding: 20px 0;
			display: flex;
			justify-content: center;
		}
	}
</style>